<template>
  <vue-particles
    id="tsparticles"
    :particlesInit="particlesInit"
    :particlesLoaded="particlesLoaded"
    :options="{
      background: {
        color: {
          value: '#ccddfa',
        },
      },
      fpsLimit: 120,
      interactivity: {
        events: {
          onClick: {
            enable: true,
            mode: 'push',
          },
          onHover: {
            enable: true,
            // 开启鼠标悬浮的效果(线条跟着鼠标移动)
            mode: 'grab',
            // 开启鼠标悬浮的效果(线条远离鼠标移动)
            // mode: 'repulse',
          },
          resize: true,
        },
        modes: {
          bubble: {
            distance: 400,
            duration: 2,
            opacity: 0.8,
            size: 40,
          },
          push: {
            quantity: 4,
          },
          repulse: {
            distance: 200,
            duration: 0.4,
          },
        },
      },
      particles: {
        color: {
          value: '#409EFF',
        },
        links: {
          color: '#409EFF',
          distance: 150,
          enable: true,
          opacity: 0.5,
          width: 1,
        },
        move: {
          direction: 'none',
          enable: true,
          outMode: 'bounce',
          random: false,
          speed: 1,
          straight: false,
        },
        number: {
          density: {
            enable: true,
            area: 800,
          },
          value: 80,
        },
        opacity: {
          value: 0.5,
        },
        shape: {
          type: 'circle',
        },
        size: {
          random: true,
          value: 5,
        },
      },
      detectRetina: true,
    }"
  />
  <div id="userLayout">
    <a-layout style="min-height: 100vh">
      <a-layout-header class="header">
        <a-space>
          <img src="@/assets/logo.png" class="logo" alt="" />
          <div>智能BI</div>
        </a-space>
      </a-layout-header>
      <a-layout-content class="content">
        <router-view />
      </a-layout-content>
      <a-layout-footer class="footer">
        Ant Design ©2018 Created by Ant UED
        <div>qqqqqqq</div>
      </a-layout-footer>
    </a-layout>
  </div>
</template>

<script setup lang="ts">
import { loadSlim } from "tsparticles-slim";

const particlesInit = async (engine: any) => {
  //await loadFull(engine);
  await loadSlim(engine);
};

const particlesLoaded = async (container: any) => {
  console.log("Particles container loaded", container);
};
</script>

<style scoped>
#userLayout {
  text-align: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

#userLayout .logo {
  width: 74px;
  height: 64px;
}

#userLayout .content {
  margin-bottom: 16px;
  padding: 20px;
}

#userLayout .footer {
  background: #efefef;
  padding: 16px;
  position: static;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
}
</style>
